<script lang="ts" setup>
// 引入CompositionApi
import { onBeforeUnmount, ref, watchEffect } from 'vue';

import {Skeleton} from "../index"; //组件

// 声明类型
const props = defineProps({
  pending: {
    type: Boolean,
    default: false
  },
  error: {
    type: Object,
    default: null
  },
  isEmpty: {
    type: Boolean,
    default: () => false
  }
})

// 加载响应式参数
const loading = ref(false)

// 监听
const stop = watchEffect(() => {
  if (props.pending && !loading.value) {
    loading.value = true
  } else {
    setTimeout(() => {
      loading.value = false
    }, 200)
  }
})

onBeforeUnmount(() => stop())
</script>

<template>
  <div>
    <template v-if="loading">
      <slot name="loading">
          <Skeleton />
      </slot>
    </template>
    <template v-else-if="error">
      {{ error }}
    </template>
    <template v-else-if="isEmpty">
      <a-empty :description="$t('common.noText')" />
    </template>
    <template v-else>
      <slot name="default" />
    </template>
  </div>
</template>

<style lang="less" scoped>

</style>
